<template id="">
<!-- 日历 -->
  <f7-input
    type="text"
    :placeholder="placeholder"
    readonly
    :value="value | date"
    @input="value= $event.target.value"
  ></f7-input>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择日期"
    },
    params: {
      type: Object,
      default: {}
    },
    value: {
      type: Date
    },
    defaultValue: null
  },
  watch: {
    value: {}
  },
  methods: {
    validatePicker($el = this.$el) {}
  },
  mounted() {
    const app = this.$f7;
    let params = this.$util.extend(
      {
        inputEl: app.$(this.$el).find("input"),
        dateFormat: "yyyy-MM",
        openIn: "customModal",
        toolbarCloseText: "确定",
        value: new Date(),
        monthNames: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"]
      },
      this.params || {}
    );
    this.calendar = app.calendar.create(params);
    this.calendar.value.push(this.defaultValue || new Date());
    this.calendar.updateValue();
  },
  beforeDestroy() {
    this.calendar.destroy();
  }
};
</script>
<style scoped>
</style>

